<template>
  <div>
    <div class="search-header">
      <form action="/">
        <van-search v-model="value" @search="onSearch">
          <template #left>
            <van-icon name="arrow-left" @click="onCancel" />
          </template>
        </van-search>
      </form>
    </div>
    <div class="search-ordering">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @change="selectItem" />
        <van-dropdown-item v-model="value2" disabled :options="option2" />
      </van-dropdown-menu>
    </div>
    <div class="search-box" v-if="this.goodsSearchItems.length != 0">
      <goods-list :goodsItems="this.goodsSearchItems"></goods-list>
    </div>
    <div class="search-box empty-result" v-if="this.goodsSearchItems.length == 0">
      <div>
        <ul>
          <li><img src="../../views/Me/img/Myorder.png" alt=""></li>
          <li>暂时没有{{this.value}}相关的商品</li>
        </ul>
      </div>
      <div class="recommend-header">
        <img src="../../views/Home/img/like.png">&nbsp;猜你喜欢
      </div>
      <goods-list :goodsItems="this.goodsInfo"></goods-list>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  import axios from 'axios'
  import GoodsList from '../goods/GoodsList.vue'
  export default {
    components: {
      GoodsList
    },
    data() {
      return {
        value: '',
        // goodsItems: [],
        historySearch: [],
        active: 0,
        value1: 0,
        title1: '综合',
        value2: 3,
        option1: [{
            text: '综合',
            value: 0
          },
          {
            text: '价格最低',
            value: 1
          },
          {
            text: '价格最高',
            value: 2
          }
        ],
        option2: [{
            text: '筛选',
            value: 3
          },
          {
            text: '好评排序',
            value: 4
          },
          {
            text: '销量排序',
            value: 5
          }
        ]
      }
    },
    mounted() {
      console.log('goodsSearchItems:', this.goodsSearchItems)
    },
    methods: {
      ...mapMutations(['SET_GOODS_SEARCH_ITEMS']),
      async getSearchList() {
        console.log('value:', this.value)
        await axios.get(axios.defaults.baseURI + 'books/goodsinfo/?search=' + this.value).then(res => {
          this.SET_GOODS_SEARCH_ITEMS(res.data)
          console.log('goodsSearchItems:', this.goodsSearchItems)
          // this.goodsItems = res.data
        })
      },
      onSearch(val) {
        const word = val.trim()
        if (word !== '') {
          const storage = window.localStorage
          // indexOf() 判断历史搜索是否包含该搜索词，如果包含，返回索引值，否则返回-1
          if (this.historySearch.indexOf(word) !== -1) {
            this.historySearch.splice(this.historySearch.indexOf(word), 1)
            this.historySearch.unshift(word)
          } else {
            this.historySearch.unshift(word)
          }
          if (this.historySearch.length > 8) {
            // pop() 从数组中删除最后项,并返回该删除项
            this.historySearch.pop()
          }
          storage.setItem('OrderSearchWord', JSON.stringify(this.historySearch))
          this.value = word
          this.getSearchList()
        } else {
          this.$dialog.alert({
            message: '请输入搜索内容'
          }).then(() => {

          })
        }
      },
      async selectItem(value) {
        if (value === 1) {
          await axios.get(axios.defaults.baseURI + 'books/goodsinfo/?search=' + this.value + '&ordering=selling_price').then(
            res => {
              this.SET_GOODS_SEARCH_ITEMS(res.data)
              // this.goodsItems = res.data
              console.log('res1:', res)
              console.log('goodsItems1:', this.goodsItems)
            })
        } else if (value === 2) {
          await axios.get(axios.defaults.baseURI + 'books/goodsinfo/?search=' + this.value + '&ordering=-selling_price').then(
            res => {
              this.SET_GOODS_SEARCH_ITEMS(res.data)
              // this.goodsItems = res.data
              console.log('res2:', res)
            })
        } else {
          this.getSearchList()
        }
      },
      onCancel() {
        this.$router.go(-1)
      }
    },
    created() {
      this.value = this.$route.query.searchWord
      console.log('value:', this.value)
      this.getSearchList()
    },
    computed: {
      ...mapState(['goodsInfo', 'goodsSearchItems'])
    }
  }
</script>

<style scoped>
  .empty-result {
    text-align: center;
    background-color: #F2F2F2;
    padding-top: 10px;
  }
</style>
